<template>
  <input type="text" v-model.lazy="message">
  <br>
  <h1>{{ message }}</h1>
</template>

<script>

import {customRef} from "vue";

export default {
  name: 'App',
  components: {},
  setup() {
    function myref(value) {
      return customRef(
          (track, trigger) => {
            return {
              get() {
                console.log('有人读取myref')
                track()//追踪数据的变化
                return value
              },
              set(newValue) {
                console.log('有人往myref写入数据', newValue)
                value = newValue //将新的value传给value
                setTimeout(() => {
                  trigger()//通知vue重新解析模板
                }, 3000)
              }
            }
          }
      )
    }

    let message = myref('hello')

    return {message}
  },

}
</script>

<style>
</style>
